@{
    Layout = "_Layout";
}

<style>
    #form_box {
        position: absolute;
        top: 40%;
        right: 0%;
        transform: translate(-50%, -50%);
        width: 400px;
        /* 磨砂玻璃效果 */
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 10px;
    }

    #introduce {
        position: absolute;
        top: 40%;
        left: 30%;
        transform: translate(-50%, -50%);
        width: 500px;
    }

    .banner-video {
        position: absolute;
        height: 100%;
        object-fit: cover;
        /* opacity: 0.8; */
        top: 0px;
        left: 0px;
        z-index: -1;
        width: 100%;
    }
</style>

<main style="position: relative; height: 100%; min-width: 1200px;">
    <video src="~/video/bg.mp4" class="banner-video" width="auto" autoplay="true" loop="true"></video>

    <div>
        <div class="card" id="introduce">
            <div class="card-content">
                <p class="title">
                    服饰工艺业务系统
                </p>
                <p class="subtitle" style="padding-left: 12px; margin-top: 12px;">
                    “在数字的世界, 为您提供最好的服务”
                </p>
            </div>
            <div class="card-content">
                <div class="content">
                    <strong>百艺服饰</strong> 是一家专业的服饰工艺管理公司, 致力为服饰加工企业提供方便快捷的管理服务.
                    <br />
                    <br />
                    <a href="#">@@百艺服饰团队</a>.
                    <time datetime="2023-12-20">Writed - 20 Dec 2023</time>
                </div>
            </div>
            <div class="card-footer">
                <p class="card-footer-item">
                    <span>
                        <a href="">工厂合作联系(020-114514)</a>
                    </span>
                </p>
            </div>
        </div>

        <form class="box" id="form_box" method="post">
            <h4 class="title is-4"><strong>用户账号登录</strong></h4>
            <div style="padding-left: 20px;">
                <div class="field">
                    <label class="label">账号</label>
                    <p class="control has-icons-left has-icons-right">
                        <input name="PhoneNumber" class="input" type="phone"
                               placeholder="请输入手机号" pattern="^1[3456789]\d{9}$" autofocus required>
                        <span class="icon is-small is-left">
                            <i class="fa-solid fa-user"></i>
                        </span>
                        <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                        </span>
                    </p>
                </div>

                <div class="field">
                    <label class="label">密码</label>
                    <p class="control has-icons-left">
                        <input name="Password" class="input" type="password"
                               placeholder="请输入密码" required>
                        <span class="icon is-small is-left">
                            <i class="fas fa-lock"></i>
                        </span>
                    </p>
                </div>

                <div class="field buttons is-right">
                    <button class="button is-primary is-fullwidth is-outlined" type="submit">登录</button>
                </div>

            </div>

        </form>

    </div>
</main>
